<template>
  <div>
    <p>我是父组件</p>
    <!-- 父传子：父组件将数据传给子组件，组件接受后显示出来。1.传值，通过属性传值2.接受，通过props接受 -->
    <p>父组件中的值更新时会同步更新子组件的值.单向数据流：单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。</p>
    <div class="child">
      <!-- <v-small
        info1="6-25"
        :info2="msg"
        :info3="num"
        :info4="666"
      ></v-small> -->
      <!-- <vSamll2
        :info1="10"
        info2="10"
        :info3="true"
        info4="10"
        info5="hi"
        :info6="[1,2,3,4]"
      ></vSamll2> -->
      <!-- native原生的事件 -->
      <!-- <v-samll3
        @click.native="aa"
        @sent="getData"
      ></v-samll3> -->
      <!-- <v-samll4></v-samll4>
      <v-samll5></v-samll5> -->
    </div>
    <p>子组件的数据：{{msg2}}</p>
    <input type="text" v-model="num[0]">
  </div>
</template>
<script>
// import vSamll from './small.vue'
// import vSamll2 from './small2.vue'
// import vSamll3 from './small3.vue'
// import vSamll4 from './small4.vue'
// import vSamll5 from './small5.vue'
export default {
  data() {
    return {
      msg: '照顾好自己' ,
      num: [1],
      msg2: ''
    }
  },
  components: {
    // vSamll3: vSamll3,
    // vSamll4: vSamll4,
    // vSamll5: vSamll5
  },
  methods: {
    getData(val1, val2) {
      console.log(val1);
      console.log(val2);
      this.msg2 = val2
    },
    aa() {
      console.log('我是真的点击');
    }
  }
}
</script>
<style scoped>
  .child {
    width: 200px;
    border: 1px solid red;
  }
</style>